<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">
    <title>京东移动端首页(流动布局)</title>
    <!-- 引入初始化CSS -->
    <link rel="stylesheet" href="css/normalize.css">
    <!-- 引入首页的CSS -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入swiper.css文件 -->
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <!-- 引入jQuery库文件 -->
    <script src="js/jQuery.big.js"></script>
    <!-- 引入我们自己的js文件 -->
    <script src="js/index.js"></script>
    <!-- 引入swiper.js文件 -->
    <script src="js/swiper-bundle.min.js"></script>
</head>
<script>
    window.addEventListener("load", function () {
        var gb = document.querySelector(".gb");
        var app = document.querySelector("header");
        gb.addEventListener("click", function () {
            app.style.display = "none";
        })
    })
</script>

<body>
    <!-- 头部模块 开始 -->
    <header>
        <div class="clearfix app">
            <ul>
                <li class="gb">
                    <img src="images/×.png" alt="">
                </li>
                <li><img src="images/logo.png" alt=""></li>
                <li>打开京东APP，购物更轻松</li>
                <li><a style="color: #FFF;"
                        href="https://wqs.jd.com/downloadApp/download.html?channel=jd-m-xsg-sqzt&inteneUrlParams=%7B%22category%22%3A%22jump%22%2C%22des%22%3A%22hourlygo%22%2C%22source%22%3A%22ceshi%22%2C%22sourceType%22%3A%22JSHOP_SOURCE_TYPE%22%2C%22sourceValue%22%3A%22JSHOP_SOURCE_VALUE%22%2C%22M_sourceFrom%22%3A%22mxz%22%7D&ms=mxz">立即打开</a>
                </li>
            </ul>
        </div>
    </header>
    <!-- 头部模块 结束 -->
    <!-- 搜索模块 开始 -->
    <div class=" search-wrap">
        <div class="search-btn">
            <a href="https://wqs.jd.com/wxsq_project/portal/m_category/index.shtml"><span></span></a>
        </div>
        <div class="search">
            <div class="jd-icon"></div>
            <input type="text" maxlength="20" placeholder="奥利奥饼干">
            <div class="fdj"></div>
        </div>
        <div class="search-login"><span><a style="color: #FFF;"
                    href="https://plogin.m.jd.com/login/login?appid=300&returnurl=https%3A%2F%2Fwq.jd.com%2Fpassport%2FLoginRedirect%3Fstate%3D1102268397878%26returnurl%3Dhttps%253A%252F%252Fhome.m.jd.com%252FmyJd%252Fhome.action&source=wq_passport">登录</a></span>
        </div>
    </div>
    <!-- 搜索模块 结束 -->
    <!-- 主体内容模块 开始 -->
    <div class=" main-content">
        <!-- 轮播图 -->
        <div class="focus">
            <!-- Swiper -->
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="upload/banner①.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="upload/banner②.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="upload/banner③.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="upload/banner④.jpg" alt="">
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>

    <!-- 品牌日推荐模块 -->
    <div class="brand">
        <div><a href="#"><img src="upload/pic22.png" alt=""></a></div>
        <div><a href="#"><img src="upload/pic33.png" alt=""></a></div>
        <div><a href="#"><img src="upload/pic11.png" alt=""></a></div>
    </div>
    <!-- nav模块 -->
    <div class="nav">
        <a href="https://h5.m.jd.com/babelDiy/Zeus/4JkCVz6z5RB4dBL7bZBwtGRiBLLw/index.html?hideTabbar=true">
            <img src="upload/nav1.png" alt="">
            <span>京东超市</span>
        </a>
        <a href="https://pro.m.jd.com/mall/active/8tHNdJLcqwqhkLNA8hqwNRaNu5f/index.html">
            <img src="upload/nav2.png" alt="">
            <span>数码电器</span>
        </a> <a href="https://h5.m.jd.com/babelDiy/Zeus/2mPT6i3AsiqRcsZPKSya8Atva2f7/index.html">
            <img src="upload/nav3.png" alt="">
            <span>京东新百货</span>
        </a> <a href="https://pro.m.jd.com/mall/active/4P9a2T9osR9JvtzHVaYTPvsecRtg/index.html">
            <img src="upload/nav4.png" alt="">
            <span>京东生鲜</span>
        </a> <a href="http://www.jddj.com/#/">
            <img src="upload/nav5.png" alt="">
            <span>京东到家</span>
        </a> <a href="https://prodev.m.jd.com/mall/active/N2p5dHzdwxnAqp182PVJmc5L5Se/index.html">
            <img src="upload/nav6.png" alt="">
            <span>充值缴费</span>
        </a> <a href="https://testpdj-three.jd.com/activity/union/middlePage/index.html?isSelfTake=false&source=ceshi">
            <img src="upload/nav7.png" alt="">
            <span>附近好店</span>
        </a> <a href="https://coupon.m.jd.com/center/getCouponCenter.action">
            <img src="upload/nav8.png" alt="">
            <span>领券</span>
        </a> <a href="https://d.jr.jd.com/uc-fe-growing/jintiepindao?channellv=mapp">
            <img src="upload/nav9.png" alt="">
            <span>领金贴</span>
        </a> <a
            href="https://plogin.m.jd.com/login/login?appid=300&returnurl=https%3A%2F%2Fwq.jd.com%2Fpassport%2FLoginRedirect%3Fstate%3D1102268133172%26returnurl%3Dhttps%253A%252F%252Fplus.m.jd.com%252Findex&source=wq_passport">
            <img src="upload/nav10.png" alt="">
            <span>PLUS会员</span>
        </a>
    </div>
    <!-- 秒杀模块 -->
    <div class="ms">
        <div class="clearfix top">
            <h3>京东秒杀</h3>
            <span>20</span>
            <a href="https://h5.m.jd.com/babelDiy/Zeus/28ku5QZs2VMePfoUFhP28xdQkd25/index.html?babelChannel=ttt2">
                <p>爆款轮番秒&nbsp;</p>
            </a>
        </div>
        <div class="bottom">
            <ul>
                <li>
                    <a href="#"><img src="upload/ms1.png" alt="">
                        <p>￥2099</p>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="upload/ms001.png" alt="">
                        <p>￥208</p>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="upload/ms002.png" alt="">
                        <p>￥93</p>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="upload/ms003.png" alt="">
                        <p>￥88</p>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="upload/ms004.png" alt="">
                        <p>￥1889</p>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="upload/ms005.png" alt="">
                        <p>￥3099</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 商品模块 -->
    <div class="clearfix shop">
        <div>
            <img src="upload/shop1.png" alt="">
            <div class="text">
                <span> <img src="images/jd-shop.png"> 美的(Midea)净水器家用MRC1859A-800G直饮机反渗透过滤器零陈水滤芯反渗透澎湃大水量
                    口感椰子800净水器</span>
                <e>￥3698.00</e>
                <p>1000+条评论</p>
            </div>
        </div>
        <div>
            <img src="upload/shop2.png" alt="">
            <div class="text">
                <span>聚心尚品（x-life） 垃圾袋家用实惠装大号商用抽绳收口加厚塑料袋小手提式拉绳束口袋 3卷【45只】</span>
                <e>￥12.90</e>
                <p>5000+条评论</p>
            </div>
        </div>
        <div>
            <img src="upload/shop3.png" alt="">
            <div class="text">
                <span> <img src="images/jd-shop.png"> 奥利奥（Oreo）夹心饼干休闲零食 早餐饼干办公室下午茶网红小吃 巧克力味349g独立小包装（包装随机发）</span>
                <e>￥19.90</e>
                <p><img src="images/jd-zy.png" alt=""><span>1000+条评论</span></p>
            </div>
        </div>

        <div>
            <a href="#"> <img src="upload/shop4.png" alt="">
                <div class="text">
                    <span> <img src="images/jd-shop.png"> 雅萌（YAMAN）ACE五代美容仪 黄金五环射频仪 提拉紧致 淡化细纹【胡杏儿推荐】</span>
                    <e>￥4699.00</e>
                    <p><img src="images/jd-zy.png" alt=""><span>5条评论</span></p>
                </div>
            </a>
        </div>
        <div>
            <img src="upload/shop5.png" alt="">
            <div class="text">
                <span> 2头鲍鱼即食鲍鱼干特级大两头鲍溏心鲍鱼特级干鲍批发糖心鲍酒店会所高级食材鲍汁捞饭年货送礼礼盒
                    2头即食鲍鱼（鲍鱼单个装，带鲍汁约435克）</span>
                <e>￥1288.00</e>
                <p>500+条评论</p>
            </div>
        </div>
        <div>
            <img src="upload/shop6.png" alt="">
            <div class="text">
                <span> <img src="images/jd-shop.png"> 美的(Midea)电热水壶烧水壶双层防烫一体无缝拔盖设计净甜家用办公大容量多段控温恒温开水壶MK-SHE1530</span>
                <e>￥139.00</e>
                <p><img src="images/jd-zy.png" alt=""><span>1000+条评论</span></p>
            </div>
        </div>
        <div>
            <img src="upload/shop7.png" alt="">
            <div class="text">
                <span> <img src="images/jd-shop.png"> ThinkPad 联想 P15v 2020款 英特尔酷睿处理器 15.6英寸 高性能设计师笔记本电脑 十代标压i7 16G 512G
                    4G独显 02CD</span>
                <div class="zdj"><img src="images/jd-zdj.png" alt="">30天最低价</div>
                <e>￥7698.00</e>
                <p>1000+条评论</p>
            </div>
        </div>
        <div>
            <img src="upload/shop8.png" alt="">
            <div class="text">
                <span> 卡萨帝（Casarte）玉墨系列 10公斤滚筒洗衣机洗烘一体 三代微蒸汽空气洗 除菌除螨 变频电机 HB10S3EU1</span>
                <div class="zdj"><img src="images/jd-zdj.png" alt="">30天最低价</div>
                <e>￥5499.00</e>
                <p><img src="images/jd-zy.png" alt=""><span>20万+条评论</span></p>
            </div>
        </div>
        <div>
            <img src="upload/shop9.png" alt="">
            <div class="text">
                <span> 闪魔 苹果11钢化膜 iphoneXR/XsMax/11promax手机膜高清非全屏抗蓝光防窥保护膜
                    XR/11【6.1英寸^加强版】2片+神器</span>
                <e>￥22.80</e>
                <p> <img class="jd-wuliu" src="images/jd-wuliu.png" alt=""></p>
            </div>
        </div>
        <div>
            <img src="upload/shop10.png" alt="">
            <div class="text">
                <span> 恩科（ENKOR）mini2电脑迷你小音响 有线台式低音炮 多媒体笔记本电脑桌面音箱</span>
                <div class="zdj"><img src="images/jd-zdj.png" alt="">60天最低价</div>
                <e>￥29.90</e>
                <p><img src="images/jd-zy.png" alt=""><span>20万+条评论</span></p>
            </div>
        </div>
    </div>
    <!-- 主体内容模块 结束 -->

    <!-- 底部模块 开始 -->
    <footer>
        <div class="shang">
            <div><a
                    href="https://plogin.m.jd.com/login/login?appid=300&returnurl=https%3A%2F%2Fwq.jd.com%2Fpassport%2FLoginRedirect%3Fstate%3D1102268397878%26returnurl%3Dhttps%253A%252F%252Fhome.m.jd.com%252FmyJd%252Fhome.action&source=wq_passport">登录</a>
            </div>
            <div><a
                    href="https://plogin.m.jd.com/login/login?appid=300&returnurl=https%3A%2F%2Fwq.jd.com%2Fpassport%2FLoginRedirect%3Fstate%3D1102268397878%26returnurl%3Dhttps%253A%252F%252Fhome.m.jd.com%252FmyJd%252Fhome.action&source=wq_passport">注册</a>
            </div>
            <div><a
                    href="https://plogin.m.jd.com/login/login?appid=300&returnurl=https%3A%2F%2Fwq.jd.com%2Fpassport%2FLoginRedirect%3Fstate%3D1102268397878%26returnurl%3Dhttps%253A%252F%252Fhome.m.jd.com%252FmyJd%252Fhome.action&source=wq_passport">客户服务</a>
            </div>
            <div><a href="#">返回顶部</a></div>
        </div>
        <div class="zhong">
            <div><a
                    href="https://wqs.jd.com/downloadApp/download.html?channel=jd-m-xsg-sqzt&inteneUrlParams=%7B%22category%22%3A%22jump%22%2C%22des%22%3A%22hourlygo%22%2C%22source%22%3A%22ceshi%22%2C%22sourceType%22%3A%22JSHOP_SOURCE_TYPE%22%2C%22sourceValue%22%3A%22JSHOP_SOURCE_VALUE%22%2C%22M_sourceFrom%22%3A%22mxz%22%7D&ms=mxz"><img
                        src="images/footer1.png" alt=""></a></div>
            <div><a href="#"><img src="images/footer2.png" alt=""></a></div>
            <div><a href="https://www.jd.com/"><img src="images/footer3.png" alt=""></a></div>
        </div>
        <div class="text">
            Copyright © 2004-2020 京东JD.com 版权所有
        </div>
    </footer>
    <!-- 底部模块 结束 -->
    <!-- 返回顶部 模块 -->
    <div class="goBack">

    </div>
</body>

</html>